<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom page-header">
    <h1 class="h2">电表管理</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <button type="button" class="btn btn-primary" onclick="openMeterModal()">
            <i class="fas fa-plus"></i> 新增电表
        </button>
    </div>
</div>

<div class="table-responsive">
    <table id="metersTable" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>电表编号</th>
                <th>客户编号</th>
                <th>客户名称</th>
                <th>安装日期</th>
                <th>倍率</th>
                <th>当前读数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 数据将通过JavaScript动态加载 -->
        </tbody>
    </table>
</div>

<!-- 电表信息模态框 -->
<div class="modal fade" id="meterModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">电表信息</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="meterForm">
                    <input type="hidden" id="meterId">
                    <div class="form-group">
                        <label>电表编号</label>
                        <input type="text" class="form-control" id="meterCode" required>
                    </div>
                    <div class="form-group">
                        <label>客户</label>
                        <select class="form-control" id="customerId" required>
                            <!-- 客户列表将通过JavaScript动态加载 -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label>安装日期</label>
                        <input type="datetime-local" class="form-control" id="installationDate" required>
                    </div>
                    <div class="form-group">
                        <label>倍率</label>
                        <input type="number" class="form-control" id="multiplier" required min="0.01" step="0.01">
                    </div>
                    <div class="form-group">
                        <label>当前读数</label>
                        <input type="number" class="form-control" id="currentReading" required min="0" step="0.01">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveMeter">保存</button>
            </div>
        </div>
    </div>
</div> 